/**
 * Panel的基础属性
 */
// 更新面板里面的组件
Ext.onReady(function() {
	var btn = new Ext.Button({
		text : "按钮1"
	});
	var panel = new Ext.Panel({
		width : 500,
		height : 600,
		// 可折叠的
		collapsible : true,
		// 工具
		tools : [ {
			id : "save",
		}, {
			id : "print",
			handler : function() {
				window.print();
			}
		} ],

		// 顶部工具栏
		tbar : [ {
			text : "保存"
		}, {
			text : "关闭"
		} ],
		// 底部工具栏
		bbar : [ {
			text : "添加内容",
			handler : function() {
				panel.add({
					title : "面板1"
				});
				panel.add({
					title : "面板2"
				});
				// 通过id删除
				// panel.remove("panel3");
				// 查找第三个组件
				var p2 = panel.getComponent(2);
				console.log(p2.title);
				panel.remove(p2);
				panel.doLayout();
				console.log("添加成功");
			}
		}, {
			text : "更新内容",
			handler : function() {
				panel.body.update("<h1>新的内容</h1>" + new Date());
			}
		} ],
		title : "我的面板",
		buttons : [ {
			text : "确定"
		}, {
			text : "取消"
		} ],
		buttonAlign : "center",
		// html:"<h1>这是面板的Body区域</h1>"
		autoLoad : "news.html"
	// items:[btn,{xtype:"button",text:"按钮2"},{id:"panel3",title:"面板3",height:100,border:false,bodyBorder:false}]
	});
	// render后面的参数可以是一个字符串代表id,或者dom节点，或者是Ext.get()方法返回的element,或者是document.body(一般不这么用，因为body标签往往不止包含一个元素)
	// panel.render("panel");
	// 一般用于做主界面
	new Ext.Viewport({
		layout : "border",
		items : [ {
			region : "north",
			height: 100,
			title : "顶部工具Logo及Banner"
		}, {
			region : "west",
			width : 150,
			title : "菜单位"
		}, {
			region : "center",
			title : "主区域"
		}, ]
	});
});